<template>
  	<div>
  		<x-header style="background: #e78a3d;" :left-options="{backText: ''}" :right-options="{showMore: false}" @on-click-more="showMenus = true">在线支付</x-header>
  		<div class="amount">
  			<p class="title">等待支付的金额</p>
  			<p class="price"><span class="smallrmb">￥</span>{{this.totalPrice}}</p>
  		</div>
  		
  		<div class="Way-box">
  			<div class="title">选择支付方式</div>
  			<ul class="Choice">
  				<li></li>
  			</ul>
  		</div>
  		<div class="payment_pay" @click.stop.prevent="payment_pay">
  			确认支付  ￥{{this.totalPrice}}
  		</div>
  	</div>
</template>

<script type="text/ecmascript-6">
	import { XHeader } from 'vux';
	import {pay} from 'src/methods/request.js';
	  export default {
	    props: {
	    },
	    data() {
	      return {
	        totalPrice: "",
	        orderNo:""
	      };
	    },
	    created() {
	    	this.mchtId =JSON.parse(sessionStorage.getItem("mchtId"));
	    },
	    mounted(){
	    	this.$nextTick(_ => {
				this.totalPrice = JSON.parse(sessionStorage.getItem("totalPrice"));
	    	})
	    },
	    methods: {
			payment_pay() {
		        if (this.totalPrice === 0) {
		          return;
		        }else{
//		        	window.alert("支付$"+this.totalPrice+"元");
		        	//模拟支付
					this.orderNo = JSON.parse(sessionStorage.getItem("orderNo"));
					this.mchtId = JSON.parse(sessionStorage.getItem("mchtId"));
					this.openId = JSON.parse(sessionStorage.getItem("openId"));
					pay({mchtId:this.mchtId,orderNo:this.orderNo,openId:"ASX5542684QWE"}).then(response => {
						if(response.rspCode == "0000"){
								alert("支付成功！");
								
							}else{
								alert(response.rspMsg)
							}
						console.log(response);
						}
					).catch(
						error => console.log(error)
					);
		        	this.$router.push('/complete');
		        }
      		},
	    },
	    created() {
	
	    },
	    components: {
			XHeader
	    }
	  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixin";
	.payment_pay{
		position: fixed;
		width: 100%;
		height: 48px;
		text-align: center;
		background: #e78a3d;
		line-height: 48px;
		font-size: 16px;
		color: #fff;
		left: 0;
		bottom: 0;
	}
	.amount{
		width: 94.5%;
		padding: 20px 0;
		margin: 3% 0 0 2.55%;
		background: #f2f2f2;
		border-radius: 2%;
	}
	.amount .title{
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #333333;
	}
	.amount .price{
		width: 100%;
		text-align: center;
		color: #e78a3d;
		font-weight: 600;
		font-size: 34px;
		padding-top: 12px;
		text-indent: -8px;
	}
	.amount .smallrmb{
		font-size: 18px;
	}
	.Way-box{
		width: 94.5%;
		margin: 3% 0 0 2.55%;
		border-radius: 2%;
	}
	.Way-box .title{
		font-size: 12px;
		color: #a7a7a7;
		padding-bottom: 10px;
		text-indent: 14px;
	}
	.Choice{
		background: #f2f2f2;
		padding: 10px;
	}
</style>